<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-define-property</title>
</head>
<body>
<div style="display: flex;flex-flow: column nowrap;justify-content: center;align-items: center;width: 100vw;height: 100vh;">
    <h1>
        当前时间:<span id="date">2020-07-16 21:40:35</span>
    </h1>

</div>
</body>
<script type="text/javascript">

    window.onload = function () {
        var data = {date: ''}
        observe(data)
        setInterval(() => {
            data.date = new Date().format("yyyy-MM-dd HH:mm:ss")
        }, 1000)
    }


    function observe(data) {
        if (!data || typeof data !== 'object') {
            return;
        }
        // 取出所有属性遍历
        Object.keys(data).forEach(function (key) {
            defineReactive(data, key, data[key]);
        })
    }

    function defineReactive(data, key, val) {
        observe(val) // 监听子属性
        Object.defineProperty(data, key, {
            enumerable: true, // 可枚举
            configurable: false, // 不能再define
            get: function () {
                return val
            },
            set: function (newVal) {
                console.log('哈哈哈，监听到值变化了 ', val, ' --> ', newVal)
                val = newVal
                document.getElementById("date").innerText = newVal
            }
        })
    }


    // 对Date的扩展，将 Date 转化为指定格式的String
    // 月(M)、日(d)、小时(H)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
    // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
    // 例子：
    // (new Date()).Format("yyyy-MM-dd HH:mm:ss.S") ==> 2006-07-02 08:09:04.423
    // (new Date()).Format("yyyy-M-d H:m:s.S")      ==> 2006-7-2 8:9:4.18
    Date.prototype.format = function (fmt) {
        var o = {
            "y+": this.getFullYear(),                 //月份
            "M+": this.getMonth() + 1,                 //月份
            "d+": this.getDate(),                    //日
            "H+": this.getHours(),                   //小时
            "m+": this.getMinutes(),                 //分
            "s+": this.getSeconds(),                 //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds()             //毫秒
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }
</script>
</html>
